<template>
	<view class="order-info-page">
		<TopBar
			left-icon="/static/user.png"
			scan-icon="/static/saoyisao.png"
			menu-icon="/static/menu.png"
			@menu="toggleMenu"
		/>

		<scroll-view scroll-y class="form-scroll">
			<!-- 返回箭头独立一行 -->
			<view class="back-row" @click="goBack">
				<image class="back-arrow-icon" src="/static/left.png" mode="aspectFit" />
			</view>

			<view class="header">
				<text class="title">Order info</text>
				<text class="subtitle">Section 1. Client Information</text>
			</view>

			<!-- Brand name -->
			<view class="field">
				<text class="label">Brand name</text>
				<view class="input"><input v-model="brand" placeholder="Vaglette" /></view>
			</view>

			<!-- Country of registration -->
			<view class="field">
				<text class="label">Country of registration</text>
				<picker mode="selector" :range="countries" @change="onCountryChange">
					<view class="select">
						<text class="select-text">{{ countries[selectedCountry] }}</text>
						<image class="chev-icon" src="/static/down.png" mode="aspectFit" />
					</view>
				</picker>
			</view>

			<!-- City -->
			<view class="field">
				<text class="label">City</text>
				<picker mode="selector" :range="cities" @change="onCityChange">
					<view class="select">
						<text class="select-text">{{ cities[selectedCity] }}</text>
						<image class="chev-icon" src="/static/down.png" mode="aspectFit" />
					</view>
				</picker>
			</view>

			<!-- Zip code -->
			<view class="field">
				<text class="label">Zip code</text>
				<view class="input"><input v-model="zip" placeholder="75001" /></view>
			</view>

			<!-- Full address -->
			<view class="field">
				<text class="label">Full adresse</text>
				<view class="input"><input v-model="address" placeholder="220 rue Saint Honoré" /></view>
			</view>

			<!-- Transport mode -->
			<view class="field">
				<text class="label">Transport mode</text>
				<picker mode="selector" :range="transports" @change="onTransportChange">
					<view class="select">
						<text class="select-text">{{ transports[selectedTransport] }}</text>
						<image class="chev-icon" src="/static/down.png" mode="aspectFit" />
					</view>
				</picker>
			</view>

			<button class="next-btn" @click="submit">Next</button>
		</scroll-view>

		<CustomTabbar active="home" />

		<AccountMenu
			v-if="showMenu"
			:style="{ '--anchor-top': '70px', '--anchor-right': '16px' }"
			@close="closeMenu"
			@select="closeMenu"
		/>

		<!-- 内置选择器 改为包裹触发，去除独立渲染 -->
	</view>
</template>

<script setup>
import { ref } from 'vue';
import TopBar from '@/components/TopBar.vue';
import AccountMenu from '@/components/AccountMenu.vue';
import CustomTabbar from '@/components/CustomTabbar.vue';

const showMenu = ref(false);
const toggleMenu = () => { showMenu.value = !showMenu.value; };
const closeMenu = () => { showMenu.value = false; };

const goBack = () => uni.navigateBack();

const brand = ref('Vaglette');
const countries = ref(['France','Portugal','Italy','Spain']);
const selectedCountry = ref(0);
const cities = ref(['Paris','Lisbon','Milan','Madrid']);
const selectedCity = ref(0);
const zip = ref('75001');
const address = ref('220 rue Saint Honoré');
const transports = ref(['Sea','Air','Rail','Road']);
const selectedTransport = ref(0);

const onCountryChange = (e) => { selectedCountry.value = e.detail.value; };
const onCityChange = (e) => { selectedCity.value = e.detail.value; };
const onTransportChange = (e) => { selectedTransport.value = e.detail.value; };

const submit = () => {
	uni.navigateTo({ url: '/pages/home/order-production' });
};
</script>

<style lang="scss">
.order-info-page { min-height: 100vh; background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%); }
.form-scroll { margin-top: 60px; padding: 0 16px 84px 16px; box-sizing: border-box; }
.back-row { margin: 12px 0 0 -8px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.back-arrow-icon { width: 24px; height: 24px; }
.header { margin-bottom: 12px; }
.title { font-size: 22px; font-weight: 800; color: #0b1e2a; }
.subtitle { display: block; margin-top: 6px; color: #3b5560; font-size: 14px; }

.field { margin-top: 14px; }
.label { font-size: 14px; color: #0b1e2a; margin-bottom: 8px; display: block; }
.input { height: 44px; background: #fff; border-radius: 10px; display: flex; align-items: center; padding: 0 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.input input { flex: 1; height: 100%; border: none; outline: none; font-size: 14px; color: #333; }

.select { height: 44px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.select-text { color: #333; font-size: 14px; }
.chev-icon { width: 14px; height: 14px; margin-left: 8px; opacity: .8; }

.next-btn { margin: 24px 0 24px; width: 100%; height: 44px; background: #222; color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
</style>


